import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ArrowLeft, Volume2 } from 'lucide-react'

const WordCard = () => {
  const navigate = useNavigate()
  const [currentWordIndex, setCurrentWordIndex] = useState(0)

  // 示例单词数据
  const words = [
    {
      word: 'boots',
      phonetic: '[buːts]',
      chinese: '靴子',
      image: 'https://images.unsplash.com/photo-1544966503-7cc5ac882d5f?w=300&h=200&fit=crop',
      examples: [
        {
          en: 'She put on her boots and went out.',
          zh: '她穿上靴子出去了。'
        },
        {
          en: 'I need a new pair of boots.',
          zh: '我需要一双新靴子。'
        }
      ]
    },
    {
      word: 'apple',
      phonetic: '[ˈæpl]',
      chinese: '苹果',
      image: 'https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=300&h=200&fit=crop',
      examples: [
        {
          en: 'I eat an apple every day.',
          zh: '我每天吃一个苹果。'
        },
        {
          en: 'The apple is red and sweet.',
          zh: '这个苹果又红又甜。'
        }
      ]
    }
  ]

  const currentWord = words[currentWordIndex]

  const playAudio = (text) => {
    // 模拟音频播放
    console.log(`Playing audio for: ${text}`)
  }

  const nextWord = () => {
    setCurrentWordIndex((prev) => (prev + 1) % words.length)
  }

  const prevWord = () => {
    setCurrentWordIndex((prev) => (prev - 1 + words.length) % words.length)
  }

  return (
    <div className="min-h-screen p-4">
      {/* Header */}
      <div className="flex items-center mb-6">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => navigate('/')}
          className="mr-4"
        >
          <ArrowLeft size={24} />
        </Button>
        <h1 className="text-2xl font-bold text-blue-800">Word Card</h1>
      </div>

      {/* Word Card */}
      <Card className="bg-white/90 backdrop-blur-sm">
        <CardContent className="p-6">
          {/* Word and Phonetic */}
          <div className="text-center mb-6">
            <h2 className="text-4xl font-bold text-gray-800 mb-2">{currentWord.word}</h2>
            <p className="text-lg text-gray-600 mb-2">{currentWord.phonetic}</p>
            <p className="text-xl text-gray-700 mb-4">{currentWord.chinese}</p>
            <Button
              onClick={() => playAudio(currentWord.word)}
              className="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-3"
            >
              <Volume2 size={24} />
            </Button>
          </div>

          {/* Image */}
          <div className="mb-6">
            <img
              src={currentWord.image}
              alt={currentWord.word}
              className="w-full h-48 object-cover rounded-lg"
            />
          </div>

          {/* Examples */}
          <div className="space-y-4">
            {currentWord.examples.map((example, index) => (
              <div key={index} className="bg-gray-50 p-4 rounded-lg">
                <div className="flex items-start gap-3 mb-2">
                  <Button
                    onClick={() => playAudio(example.en)}
                    size="sm"
                    variant="ghost"
                    className="p-1"
                  >
                    <Volume2 size={16} />
                  </Button>
                  <p className="text-gray-800 flex-1">{example.en}</p>
                </div>
                <p className="text-gray-600 ml-10">{example.zh}</p>
              </div>
            ))}
          </div>

          {/* Navigation */}
          <div className="flex justify-between mt-6">
            <Button onClick={prevWord} variant="outline">
              Previous
            </Button>
            <span className="text-gray-600 self-center">
              {currentWordIndex + 1} / {words.length}
            </span>
            <Button onClick={nextWord}>
              Next
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default WordCard

